<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table v-loading="listLoading"
                :data="cfgHostlist"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%">
        <el-table-column align="center"
                         label="序号"
                         width="50">
          <template slot-scope="scope">
            <span>{{scope.$index +1}}</span>
          </template>
        </el-table-column>

        <el-table-column width="120px"
                         label="主机名">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.name"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100px"
                         align="center"
                         label="状态">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-select v-model="row.izEnabled"
                         size="mini"
                         placeholder="请选择">
                <el-option v-for="item in getOptions('host_iz_enabled')"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </template>
            <span v-else>{{ getDictLabel("host_iz_enabled", row.izEnabled) }}</span>
            <!-- <template v-if="row.edit">
              <el-input v-model="row.izEnabled"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.izEnabled }}</span> -->
          </template>
        </el-table-column>
        <el-table-column width="150px"
                         align="left"
                         label="IP地址">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.ipAddr"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.ipAddr }}</span>
          </template>
        </el-table-column>
        <el-table-column width="70px"
                         align="center"
                         label="并发数">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.maxConcurrent"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.maxConcurrent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="阀值-忙"
                         align="center">
          <el-table-column width="60px"
                           align="center"
                           label="CPU">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.cpuThreshold1"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.cpuThreshold1 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="50px"
                           align="center"
                           label="内存">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.memThreshold1"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.memThreshold1 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="50px"
                           align="center"
                           label="磁盘">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.diskThreshold1"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.diskThreshold1 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="阀值-高负荷"
                         align="center">
          <el-table-column width="60px"
                           align="center"
                           label="CPU">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.cpuThreshold2"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.cpuThreshold2 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="50px"
                           align="center"
                           label="内存">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.memThreshold2"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.memThreshold2 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="50px"
                           align="center"
                           label="磁盘">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.diskThreshold2"
                          class="edit-input"
                          size="small" />
              </template>
              <span v-else>{{ row.diskThreshold2 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column align="left"
                         label="备注">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.remark"
                        class="edit-input"
                        size="small" />
            </template>
            <span v-else>{{ row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center"
                         label="操作"
                         width="100">
          <template slot-scope="{row}"
                    v-if="hasPermission('/monitor/config/host/update')">
            <template v-if="row.edit">
              <el-tooltip class="item"
                          effect="light"
                          content="取消"
                          placement="top-start">
                <el-button size="mini"
                           type="warning"
                           icon="el-icon-close"
                           circle
                           @click="cancelEdit(row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item"
                          effect="light"
                          content="提交"
                          placement="top-start">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-check"
                           circle
                           @click="confirmEdit(row)">
                </el-button>
              </el-tooltip>
            </template>
            <template v-else>
              <el-tooltip v-if="hasPermission('/monitor/config/host/copy')"
                          class="item"
                          effect="light"
                          content="复制"
                          placement="top-start">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-copy-document"
                           circle
                           @click="hostCopy(row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item"
                          effect="light"
                          content="编辑"
                          placement="top-start">
                <el-button size="mini"
                           type="warning"
                           icon="el-icon-edit"
                           circle
                           @click="row.edit=true">
                </el-button>
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>
<script>
import { formatDate } from "@/utils/date";
import { hasPermission, getEntries, getLabel } from "@/utils/dict";
import { apiHostList, apiHostUpdate, apiHostCopy } from "@/api/monitor";

export default {
  name: "MonitorHost",

  data() {
    return {
      listLoading: false,
      myMap: null,
      cfgHostlist: [{ "id": 1, "name": "ech-mandy", "ipAddr": "10.127.12.123", "remark": "Vocxn Rgc Oqhcfnmoj" }]
    };
  },

  created() {
    this.callCfgHostList();
  },

  methods: {
    hasPermission(url) {
      return hasPermission(url)
    },

    getOptions(dictKey) {
      return getEntries(dictKey);
    },

    getDictLabel(dictKey, dictValue) {
      return getLabel(dictKey, dictValue);
    },

    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },

    cancelEdit(row) {
      row.name = row.originalName;
      row.izEnabled = row.originalIzEnabled;
      row.ipAddr = row.originalIpAddr;
      row.cpuThreshold1 = row.originalCpuThreshold1;
      row.cpuThreshold2 = row.originalCpuThreshold2;
      row.memThreshold1 = row.originalMemThreshold1;
      row.memThreshold2 = row.originalMemThreshold2;
      row.diskThreshold1 = row.originalDiskThreshold1;
      row.diskThreshold2 = row.originalDiskThreshold2;
      row.remark = row.originalRemark;
      row.edit = false;
    },

    confirmEdit(row) {
      row.edit = false
      apiHostUpdate(row).then(response => {
        this.messageSuccess();
      });
    },

    hostCopy(row) {
      row.edit = false
      this.listLoading = true;
      apiHostCopy(row)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            var v = data;
            this.$set(v, 'edit', false);
            v.originalName = v.name;
            v.originalIzEnabled = v.izEnabled;
            v.originalIpAddr = v.ipAddr;
            v.originalCpuThreshold1 = v.cpuThreshold1;
            v.originalCpuThreshold2 = v.cpuThreshold2;
            v.originalMemThreshold1 = v.memThreshold1;
            v.originalMemThreshold2 = v.memThreshold2;
            v.originalDiskThreshold1 = v.diskThreshold1;
            v.originalDiskThreshold2 = v.diskThreshold2;
            v.originalRemark = v.remark;

            this.cfgHostlist.push(v);
            this.messageSuccess();
          }
        });
      this.listLoading = false;
    },

    messageSuccess() {
      this.$message({
        type: 'success',
        message: '提交成功!',
        duration: 3000
      });
    },

    callCfgHostList() {
      this.listLoading = false;
      apiHostList()
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            this.cfgHostlist = data.map(v => {
              // https://vuejs.org/v2/guide/reactivity.html
              this.$set(v, 'edit', false);
              v.originalName = v.name;
              v.originalIzEnabled = v.izEnabled;
              v.originalIpAddr = v.ipAddr;
              v.originalCpuThreshold1 = v.cpuThreshold1;
              v.originalCpuThreshold2 = v.cpuThreshold2;
              v.originalMemThreshold1 = v.memThreshold1;
              v.originalMemThreshold2 = v.memThreshold2;
              v.originalDiskThreshold1 = v.diskThreshold1;
              v.originalDiskThreshold2 = v.diskThreshold2;
              v.originalRemark = v.remark;
              return v;
            })

            //this.cfgHostlist = data;
          }
        });
      this.listLoading = false;
    },
  }
};
</script>

<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
